<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
let show = ref(false)
const changeLang = type => {
  locale.value = type
}
let fieldValue = ref('')
let showPicker = ref(false)
let pickerValue = ref([])
let columns = ref([
  { text: "中文", value: 'zh', keys: 'zh' },
  { text: "English", value: 'en', keys: 'en' },
  { text: "ئۇيغۇرچە", value: 'wwe', keys: 'wwe' }
])
const onConfirm = ({ selectedValues, selectedOptions }) => {
  showPicker.value = false;
  pickerValue.value = selectedValues;
  fieldValue.value = selectedOptions[0].text;
  locale.value = selectedOptions[0].keys
  localStorage.setItem('lang', selectedOptions[0].keys)
}
</script>
<template>
  <div>
    {{ $t('messages.login') }} == {{ $t('messages.subject') }} == {{ $t('messages.phone') }}
    <van-button type="danger">危险按钮</van-button>
    <van-calendar v-model:show="show" switch-mode="year-month" /><br />
    <van-button type="warning" @click="changeLang('zh')">中文</van-button>
    <van-button type="success" @click="changeLang('en')">英文</van-button>
    <van-button type="primary" @click="changeLang('wwe')">维吾尔语</van-button>
    <div class="selectChange">
      <van-field v-model="fieldValue" is-link readonly :label="$t('messages.selectLanguage')"
        :placeholder="$t('messages.selectLanguage')" @click="showPicker = true" />
      <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
        <van-picker :model-value="pickerValue" :columns="columns" @cancel="showPicker = false" @confirm="onConfirm">
          <template #option="item">
            <span style="color:red">{{ item.text }}</span>
          </template>
        </van-picker>
      </van-popup>
    </div>
  </div>
</template>
<style scoped></style>
